<template>
  <div id="app">
    <div>
      <div class="" v-for="item in tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" >
        <div class="card_content" style="width: 880px;height: 145px">
          <!--img-->
          <div style="float: left;margin-right: 20px">
            <img :src="'static/img/'+item.img" style="width: 150px;height: 100px;margin-top: 30px;margin-left: 10px" alt="">
          </div>
          <!--title-->
          <div style="width: 700px;float: left;margin-top: 10px">
            <span style="font-weight: bold;font-size: 20px;color: rgba(17,23,43,0.94);">{{item.title}}</span>
          </div>
          <!--content-->
          <div style="width: 700px;float: left;margin-top: 10px">
                  <span class="mi" style="color: gray">
                  {{item.content}}
                  </span>
          </div>
          <!--作者-->
          <div style="width:100px;float: left;margin-top: 10px">
            <span style="color: gray;font-size: 13px">{{item.name}}</span>
          </div>
          <!--时间-->
          <div style="width: 100px;float: left;margin-top: 10px">
            <span style="color: gray;font-size: 13px">{{item.time}}</span>
          </div>
        </div>
        <el-divider></el-divider>
      </div>
    </div>
    <div style="float: right;">
      <el-pagination background
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="currentPage"
                     :page-size="pageSize"
                     layout="total, prev, pager, next"
                     :total="tableData.length"></el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: "First",
    data(){
      return{
        currentPage:1, //初始页
        pageSize:5,    //每页的数据
        tableData: [{}],
      }
    },
    methods:{
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize)  //每页下拉显示数据
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        console.log(this.currentPage)  //点击第几页
      },

      // /*查询所有信息*/
      // SelectAll(){
      //   let _this = this
      //   this.$axios.get("http://localhost:8060/infor/queryById/"+1).then(function(res){
      //     _this.tableData = res.data
      //     console.log(res.data)
      //   }).catch(function (err) {
      //     alert('查询失败')
      //   })
      // },

      /*模糊查询所有信息*/
      selectInfo(title){
        let _this = this
        this.$axios.post("http://localhost:8060/infor/selectInfo/"+title).then(function(res){
          if(res.data.length<=0){
            alert('无数据，请重新查询');
            _this.$router.push({name:'First'})
          }else{
            _this.tableData = res.data
          }
        }).catch(function (err) {
          alert('查询失败')
        })
      }
    },
    created() {
      this.selectInfo(this.$route.params.title)
    }

  }
</script>

<style scoped>
  .mi {
    width: 700px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
</style>
